<template>
  <div>
    <div class="mHead">
      <el-image :src="vals" class="image" width="100%" height="100%" />
    </div>
    <div
      class="mName"
    >
      <span class="mName2">{{
        movie.mname
      }}</span>
    </div>
    <div
      class="mName3"
    >
      <span style="font-size: large; color: white; font-family: 'Arial Black'">{{
        movie.nickname
      }}</span>
    </div>
    <div
      class="mT1"
    >
      <el-tag type="warning" class="mT2">{{ movie.mlanguage }}</el-tag>
      <el-tag type="warning" class="mT2">{{ movie.mtype }}</el-tag>
      <el-tag type="warning" class="mT2">{{ movie.duration }}分钟</el-tag>
    </div>
    <div
      class="mDir"
    >
      <span class="mDir2"
        >导演：{{ movie.director }}</span
      >
    </div>
    <div
      class="mrole1"
    >
      <span class="mrole2"
        >主演：{{ movie.mrole }}</span
      >
    </div>
  </div>
</template>
<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import emmitter from '@/utils/bus'
const movie = ref('')
const vals = ref()
onMounted(() => {
  const movieName = JSON.parse(sessionStorage.getItem('movieInfo'))
  axios.get('/api/movie/getMovieByMname/' + movieName).then((res) => {
    if (res.data !== null) {
      movie.value = res.data[0]
      vals.value = require('@/assets/moviesPic/' + res.data[0].pic)
      emmitter.emit('movieEvent', movie.value)
    } else {
      ElMessage({
        showClose: true,
        message: '网络错误！',
        type: 'error'
      })
    }
  })
})
</script>
<style lang="scss" scoped>
.mHead {
  width: 250px;
  height: 350px;
  margin-left: 100px;
  margin-top: 40px;
  display: flex;
  float: left;
  border: 4px solid #fff;
  border-bottom: 4px solid rgb(93, 88, 88);
}
.mName{
        width: 350px;
        height: 50px;
        margin-left: 10px;
        margin-top: 40px;
        display: flex;
        float: left;
}
.mName2{
  font-size: xx-large; color: white; font-family: 'Arial Black'
}
.mName3{
        width: 450px;
        height: 40px;
        margin-left: -350px;
        margin-top: 100px;
        display: flex;
        float: left;
}
.mT1{
        width: 450px;
        height: 40px;
        margin-left: -450px;
        margin-top: 140px;
        display: flex;
        float: left;
}
.mT2{
  margin-left: 30px
}
.mDir{
        width: 450px;
        height: 40px;
        margin-left: -450px;
        margin-top: 180px;
        display: flex;
        float: left;
}
.mDir2{
  font-size: large; color: white; font-family: 'Arial Black'
}
.mrole1{
        width: 450px;
        height: 40px;
        margin-left: -450px;
        margin-top: 220px;
        display: flex;
        float: left;
}
.mrole2{
  font-size: large; color: white; font-family: 'Arial Black'
}
</style>
